@import "themes/index";

$font-path: '../font';

/* Widgets 专用字体，仅包含20个字符 */
@font-face {
  font-family: "TXDDINMediumNumber";
  src: url("#{$font-path}/txddinmedium/txddinmedium.eot"); /* IE9 */
  src: url("#{$font-path}/txddinmedium/txddinmedium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("#{$font-path}/txddinmedium/txddinmedium.woff") format("woff"), /* chrome、firefox */
  url("#{$font-path}/txddinmedium/txddinmedium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  url("#{$font-path}/txddinmedium/txddinmedium.svg#fonteditor") format("svg"); /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "TXDDINRegularNumber";
  src: url("#{$font-path}/txddinregular/txddinregular.eot"); /* IE9 */
  src: url("#{$font-path}/txddinregular/txddinregular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("#{$font-path}/txddinregular/txddinregular.woff") format("woff"), /* chrome、firefox */
  url("#{$font-path}/txddinregular/txddinregular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  url("#{$font-path}/txddinregular/txddinregular.svg#fonteditor") format("svg"); /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}

/* 全局公用样式 */
.cloud-charts {
  canvas {
    position: relative;
    display: block;
  }

  &.widgets-error-info {
    margin: 0;
    padding: 0;
    overflow: auto;
    font-size: 1em;
    color: getVar(widgets-color-red, $widgets-color-red);
  }

  .widgets-reset-button {
    position: absolute;
    z-index: 1;
    padding: 4px;

    font-size: 12px;
    color: getVar(widgets-color-blue, $widgets-color-blue);
    background: getVar(widgets-color-background, $widgets-color-background);

    border: 1px solid getVar(widgets-color-gray, $widgets-color-gray);
    border-radius: 2px;

    cursor: pointer;
    user-select: none;
  }

  .g2-tooltip-item-value {
    margin-left: getVar(s2, $s2);
  }

  .g2-legend-value {
    margin-left: getVar(s2, $s2);
  }

  $legend-collapse-arrow-width: 10px;
  $legend-collapse-arrow-height: 8px;
  $legend-collapse-arrow-color: getVar(widgets-color-text-3, $widgets-color-text-3);
  $legend-collapse-arrow-disable: getVar(widgets-color-disable, $widgets-color-disable);
  .widgets-legend-collapse {
    position: absolute;
    top: 0;
    right: 0;

    width: $legend-collapse-arrow-width + 8px;
    height: 100%;

    box-sizing: border-box;
  }

  .legend-collapse-btn {
    position: relative;
    height: 50%;
    cursor: pointer;

    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 0;
      height: 0;

      border-top: $legend-collapse-arrow-height solid $legend-collapse-arrow-color;
      border-bottom: $legend-collapse-arrow-height solid $legend-collapse-arrow-color;
      border-left: $legend-collapse-arrow-width / 2 solid transparent;
      border-right: $legend-collapse-arrow-width / 2 solid transparent;

      transform: translate(0, -$legend-collapse-arrow-height / 2);
    }

    &.disable:after {
      border-top-color: $legend-collapse-arrow-disable;
      border-bottom-color: $legend-collapse-arrow-disable;
    }

    &.collapse-up:after {
      border-top: none;
    }

    &.collapse-down:after {
      border-bottom: none;
    }
  }

  .g2-legend.has-collapse {
    overflow: hidden !important;
    padding-right: $legend-collapse-arrow-width + 8px;

    .g2-legend-list {
      transition: transform 0.2s ease-in-out;
    }
  }

  ::-webkit-scrollbar {
    background: getVar(widgets-scrollbar-bg, $widgets-scrollbar-bg);
    width: 8px;
    height: 8px;
    padding: 0 3px;
    // border-radius: 3px;
  }
  ::-webkit-scrollbar-corner {
    background: getVar(widgets-scrollbar-bg, $widgets-scrollbar-bg);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: getVar(widgets-scrollbar-thumb, $widgets-scrollbar-thumb);
    border-radius: 3px;
  }
}
